<template>
  <div class="app-container">
    <el-button type="primary" v-if="hasPermission('system:user:add')" @click="handleAddUser">新增用户</el-button>
    <el-table :data="userList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="索引" width="220">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="id">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="350px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" v-if="hasPermission('system:user:edit')" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" v-if="hasPermission('system:user:delete')" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button type="warning" size="small" v-if="hasPermission('system:user:assignment')" icon="el-icon-delete" @click="assignmentRole(scope.row.id)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 16, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <!-- 编辑弹框 -->
    <el-dialog title="编辑用户" width="600px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名称" label-width="80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="80px">
          <el-input v-model="form.sex"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width="80px">
          <el-input v-model="form.avatar"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,confirmRole()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色分配 -->
    <el-dialog title="分配角色" width="400px" :visible.sync="dialogAssignment">
      <el-form :model='assRole'>
        <el-form-item  label="当前角色" label-width="80px">
          <el-input :value="currentRole"></el-input>
        </el-form-item>
        <el-form-item label="角色选择" label-width="80px">
          <el-select v-model="assRole.roleId" placeholder="选择角色">
            <el-option v-for="item in allRole" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssignment = false">取 消</el-button>
        <el-button type="primary" @click="dialogAssignment = false,confirmAssignment()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getUser,saveOrUpdate,deleteUser,currentUserRole,assignmentRole} from '@/api/user';
import {getRole} from "@/api/role"


export default {
  data() {
    return {
      userList: [],
      form:{id:null,name:'',sex:'',password:'',avatar:'',isDelete:null},
      dialogFormVisible:false,
      current:1,
      size:5,
      total:20,
      allRole:[],
      assRole:{userId:null,roleId:null},
      currentRole:'',
      dialogAssignment:false,
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      const res = await getUser(this.current,this.size)
      this.userList = res.data.item.records;
      this.total=res.data.item.total;
    },
    handleSizeChange(val) {
        this.size=val
        this.getUser()
      },
      handleCurrentChange(val) {
        this.current=val;
        this.getUser()
      },
    handleAddUser(){
        this.form={id:null,name:'',sex:'',password:'',avatar:'',isDelete:null}
        this.dialogFormVisible=true;
    },
    handleEdit(row){
      this.dialogFormVisible=true;
      this.form=row;
    },
    confirmRole(){
      saveOrUpdate(this.form).then(()=>{
        if(this.form.id==null){
        this.$message({message: '新增成功',type: 'success'});
      }else{
        this.$message({message: '修改成功',type: 'success'});
      }
        this.getUser();
      }) 
    },
    handleDelete(id){
      deleteUser(id).then(()=>{
        this.$message({message: '删除成功',type: 'success'});
        this.getUser();
      })
    },
    assignmentRole(id){
      this.assRole={userId:null,roleId:null};
      this.dialogAssignment=true;
      currentUserRole(id).then(res=>{
        this.currentRole=res.data.item[0];
      });
      getRole().then((res)=>{
        this.allRole=res.data.item
      })
      this.assRole.userId=id;
    },
    confirmAssignment(){
      assignmentRole(this.assRole.userId,this.assRole.roleId).then(()=>{
        this.$message({message: '分配成功',type:'success'})
      })
    }

  }
}
</script>

    
